<template>
  <div class="spuAttr">
    <div class="table">
      <div class="dividerBox">
        <div class="left">
          <span class="divider"></span>
          <span class="title">规格参数</span>
        </div>
        <div class="right"></div>
      </div>
      <table>
        <tbody v-for="(group, groupIndex) in groupAttrs" :key="groupIndex">
          <tr>
            <td :rowspan="group.attrs.length" class="group">
              {{ group.name }}
            </td>
            <td>
              {{ group.attrs[0].desc }}
            </td>
          </tr>
          <tr
            v-for="(attr, attrIndex) in group.attrs.slice(1)"
            :key="attrIndex"
          >
            <td>
              {{ attr.desc }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

// 属性
const props = defineProps({
  groupAttrs: {
    type: Object,
  },
});
</script>

<style lang="less" scoped>
.spuAttr {
  margin-top: 5px;
  padding: 0px 5px;
  .table {
    .dividerBox {
      margin: 0px 0px 15px 5px;
    }
    padding: 10px 1px;
    border-radius: 5px;
    width: 100%;
    background: #fff;
    table {
      width: 100%;
      border-collapse: collapse;
      .group {
        width: 55px;
        text-align: center;
        font-size: 12px;
      }
      td {
        margin: 0;
        border: 1px solid #efefef;
        padding: 10px 10px;
        font-size: 12px;
      }
    }
  }
}
</style>